import React from 'react'
import { changeNav,getApplyDetail,getApplyTrack } from '../../actions'
import { connect } from 'react-redux'

import CSSModules from 'react-css-modules'
import styles from './mine.less'
import { List,WhiteSpace,Steps,Icon,WingBlank,Flex,Button } from 'antd-mobile'

const Item = List.Item
const Brief = Item.Brief
const Step = Steps.Step
@CSSModules(styles, { allowMultiple: true })

class applyDetail extends React.Component {

	componentDidMount(){
	    this.props.tochangeNav({title:"申请单详情"})
	    this.props.getApplyTrack( this.props.params.type )
	    this.props.getApplyDetail( this.props.params.type )
	}

	render(){
		const { applyOrderDetail } = this.props

		return(
			<div>
				<WhiteSpace size="lg" />
				<WhiteSpace size="lg" />

				<WingBlank style={{padding:'0 0.4rem'}} size="lg">
					{ (()=>{
						var type = applyOrderDetail.applytrack.length || 0;
						if(applyOrderDetail.applytrack.length){
                            applyOrderDetail.applytrack[applyOrderDetail.applytrack.length-1].operateType == 5 || applyOrderDetail.applytrack[applyOrderDetail.applytrack.length-1].operateType == 4?type--:type;
						}
						if(applyOrderDetail.applydetail.applyStatus == 3 && applyOrderDetail.applytrack.length == 4){
                            type = 4
						}
						console.log(type)
						return (<Steps  current={type} direction="horizontal">
							<Step title={<span style={{fontSize:'0.22rem'}}>填写申请信息</span>} />
							<Step title={<span style={{fontSize:'0.22rem'}}>商务审核</span>}/>
							<Step title={<span style={{fontSize:'0.22rem'}}>财务审核</span>} />
							<Step title={<span style={{fontSize:'0.22rem'}}>开通成功</span>}/>
						</Steps>)
						})()
					}
			    </WingBlank>
				<List renderHeader={() => ''}>
					<div styleName="list-header" style={{lineHeight:'1rem'}}>
						申请单跟踪
					</div>
			        <Item>
			          <WhiteSpace size="lg" />
			          <Steps style={{marginLeft:"0.2rem"}} size="small" current={applyOrderDetail.applytrack.length}>
						  {	applyOrderDetail.applytrack.length&&applyOrderDetail.applytrack.map( val => {
                              if(val.operateType == 1) {
                                  return(
									  <Step title={ val.applyTime } status={val.operateFlag == 1?'error':''} description={
										  <div styleName="stepBox">
											  <div>{ val.operatorTime}    {val.nodeName}</div>
											  <div>申请人：{ val.areaManager } {val.operatorMobile }</div>
										  </div>
                                      }/>
                                  )
                              }else if(val.operateType == 2 || val.operateType == 2 || val.operateType == 4 || val.operateType == 5){
                                  return(
									  <Step title={ val.applyTime } status={val.operateFlag == 1?'error':''} description={
										  <div styleName="stepBox">
											  <div>{ val.operatorTime}    {val.nodeName}:{val.approvalOpinion}</div>
											  <div>审核人：{ val.operatorName } {val.operatorMobile }</div>
										  </div>
                                      }/>
                                  )
							  }else if(val.operateType == 3) {
                                  return(
									  <Step title={ val.applyTime } status={val.operateFlag == 1?'error':''} description={
										  <div styleName="stepBox">
											  <div>{ val.operatorTime}    {val.nodeName}</div>
											  <div> {val.approvalOpinion }</div>
										  </div>
                                      }/>
                                  )
							  }
						  })}

					   </Steps>
			        </Item>
				</List>
				<List renderHeader={() => ''}>
					<div styleName="list-header" style={{lineHeight:'1rem'}}>
						商户信息
					</div>
			        <Item>
						<Icon style={{marginBottom:'-0.1rem'}} type={require( './../../components/assets/icon_wo_suoshujituan.svg' )}/>
						<span  style={{fontSize:'0.26rem',color:'#333'}}>所属集团</span>
			        </Item>
			        <Item arrow="empty" 
			        	  multipleLine>
						<img style={{width:'1rem',height:'1rem',float:'left',marginRight:'0.2rem'}} src={applyOrderDetail.applydetail.groupLogo} alt=""/>
			          <Brief >
						  <p style={{color:'#333',fontSize:'0.28rem'}}>{ applyOrderDetail.applydetail.groupName }</p>
						  <p style={{fontSize:'0.26rem',marginTop:'0.05rem'}}>
							 <Icon style={{marginBottom:'-0.04rem'}} size='xxs' type={require( './../../components/assets/icon_storeCode.svg' )}/>
							 { applyOrderDetail.applydetail.groupCode }
						  </p>
					  </Brief>
			          
			        </Item>
			        <Item>
			          	<div style={{ float:"left",color:'#333',fontSize:'0.26rem' }}>
							<Icon style={{marginBottom:'-0.04rem',marginRight:'0.05rem'}} size='xxs' type={require( './../../components/assets/icon_wo_kaitongmendian.svg' )}/>
							开通门店
		          		</div>
		          		<div style={{ float:"right" ,fontSize:'0.3rem'}}>
							共<span style={{color:'#fd8900',fontSize:'0.3rem'}}>{ applyOrderDetail.applydetail.totalStoreNum }</span>个门店，共<span style={{color:'#fd8900',fontSize:'0.3rem'}}>{ applyOrderDetail.applydetail.totalTerminalNum }</span>个终端
		          		</div>
			        </Item>

			        {
			        	applyOrderDetail.applydetail.storeList.map( ( item,i )=>{
			        		return  <Item key={i} arrow="empty" 
					        	  thumb={<img style={{width:'0.9rem',height:'0.9rem'}} src={item.storeLogo} alt=""/> }
					        	  >
					          <Brief>
								  <p style={{fontSize:'0.28rem',color:'#333'}}>{ item.storeName }</p>
								  <p style={{fontSize:'0.26rem'}}>
									  <Icon style={{marginBottom:'-0.04rem'}} size='xxs' type={require( './../../components/assets/icon_storeCode.svg' )}/>
									  { item.storeCode }
								  </p>
								  <p style={{position:'absolute',top:'0.65rem',right:'0.4rem',fontSize:'0.26rem',color:'#333'}}>
									  <Icon style={{marginBottom:'-0.04rem',marginRight:"0.05rem"}} size='xxs' type={require( './../../components/assets/icon_wo_zhongduan.svg' )}/>
									  X{item.terminalNum+" 终端"}</p>
							  </Brief>
					        </Item>
			        	} )
			        }

				</List>
				<List renderHeader={() => ''}>
					<div styleName="list-header" style={{lineHeight:'1rem'}}>
						产品信息
					</div>
					<Item arrow="empty"
			        >
						<img
							src={applyOrderDetail.productLogo}
							style={{width:"1rem",height:"1rem",float:'left',margin:'0.15rem'}}
						/>
			         <Brief>
						 <p style={{fontSize:'0.28rem',color:'#333',lineHeight:'0.5rem'}}>{ applyOrderDetail.applydetail.productName }</p>
						 <p style={{fontSize:'0.26rem',lineHeight:'0.5rem'}}>
							 <Icon style={{marginBottom:'-0.04rem',marginRight:'0.05rem'}} size='xxs' type={require( './../../components/assets/icon_storeCode.svg' )}/>
							 { applyOrderDetail.applydetail.groupCode }
						 </p>
					 </Brief>
			        </Item>
					<Item>
						<div style={{fontSize:'0.3rem',color:'#333'}}>具体配置:</div>
						<div style = {{marginLeft:'0.4rem',width:'70%',color:'#999',fontSize:'0.26rem',whiteSpace:'initial'}}>{applyOrderDetail.applydetail.subProductInfo&&applyOrderDetail.applydetail.subProductInfo.map( val => {
                            return (<span>{val.productName}、</span>)
                        })}
                        </div>
					</Item>
			        <Item>
			          <div styleName="fs26-C99">开通费(每店): <span>&yen;{ applyOrderDetail.applydetail.activationFee }</span></div>
			          <div styleName="fs26-C99">服务费(每门店/年): <span>&yen;{ applyOrderDetail.applydetail.serviceFee}</span></div>
			          {/*<div>应收款总计</div>*/}
			          {/*<div>&yen;{ applyOrderDetail.applydetail.payableFee}</div>*/}
			          <div styleName="fs26-C99">备注：{ applyOrderDetail.applydetail.remark}</div>
			        </Item>
				</List>
				<WhiteSpace size="lg" />
				<div styleName='buttonbox'>
					<div styleName="totolpri">应收款总计:&nbsp;&nbsp;
						<span style={{color:'#fd8900'}}>&yen; { applyOrderDetail.applydetail.payableFee}</span>
					</div>
					<Flex >

						<Flex.Item>
							<Button style={{height:'0.8rem',fontSize:'0.32rem',lineHeight:'0.72rem'}} type="ghost">提醒审核</Button>
						</Flex.Item>
						<Flex.Item>
							<Button style={{height:'0.8rem',fontSize:'0.32rem',lineHeight:'0.72rem'}} type="primary">提醒审核</Button>
						</Flex.Item>
					</Flex>
				</div>

				<WhiteSpace size="lg" />
			</div>
		)
	}

}

const mapStateToProps = ( state ) => ({
	applyOrderDetail:state.applyOrderDetail
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	getApplyDetail:ordernum => dispatch( getApplyDetail( ordernum ) ),
	getApplyTrack:ordernum => dispatch( getApplyTrack( ordernum ) )
})

export default connect( mapStateToProps,mapDispatchToProps )( applyDetail )